<template>
  <div>
    <!-- 校园模块 -->
    <div class="model">
      <div class="logo">
        <img src="@/assets/images/xy.png" alt="" />
      </div>
      <el-row :gutter="$store.state.device == 'pc' ? 30 : 0" class="el_row">
        <el-col :span="$store.state.device == 'pc' ? 9 : 24" class="house-box">
          <div class="house">
            <img class="top" src="@/assets/images/school.png" />
            <!-- 视角 -->
            <div class="banner">
              <!-- 定义3D舞台 -->
              <div class="content">
                <a
                  href="https://news.sjtu.edu.cn/hlxy/20210105/139477.html"
                  style="margin-bottom:30px;"
                  target="_blank"
                >
                  <img
                    src="@/assets/images/20210105_013355_372.jpg"
                    alt=""
                    class="banne"
                  />
                  <h1 class="title">
                    年度大片登上《新闻联播》！上海交大讲述“我和我的学校”担当奋进...
                  </h1>
                </a>
                <ul>
                  <li v-for="(item, index) in list" :key="index">
                    <a :href="item.path" target="_blank">
                      <div class="list">
                        <div class="list-img">
                          <img :src="item.img" alt="" />
                        </div>
                        <div class="list-title">
                          {{ item.title }}
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" v-if="$store.state.device == 'pc'">
          <div class="mid house">
            <img class="top" src="@/assets/images/school.png" />
          </div>
        </el-col>
        <el-col :span="$store.state.device == 'pc' ? 9 : 24" class="house-box">
          <div class="house">
            <img class="top" src="@/assets/images/school.png" />
            <!-- 视角 -->
            <div class="banner">
              <!-- 定义3D舞台 -->
              <div class="content">
                <a
                  href="https://news.sjtu.edu.cn/hlxy/20210105/139473.html"
                  style="margin-bottom:30px;"
                  target="_blank"
                >
                  <img
                    src="@/assets/images/20210105_005753_637.jpg"
                    alt=""
                    class="banne"
                  />
                  <h1 class="title">
                    交大学生的“年度汉字”出炉，哪个字代表了你的2020？
                  </h1>
                </a>
                <ul>
                  <li v-for="(item, index) in list2" :key="index">
                    <a :href="item.path" target="_blank">
                      <div class="list">
                        <div class="list-title">
                          {{ item.title }}
                        </div>
                        <div class="list-img">
                          <img :src="item.img" alt="" />
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: require("@/assets/images/20210105_012229_339.jpg"),
          path: "https://news.sjtu.edu.cn/hlxy/20210105/139475.html",
          title: "交大2021月历壁纸！每一天，都把你捧在手心"
        },
        {
          img: require("@/assets/images/20201201_022838_442.png"),
          path: "https://news.sjtu.edu.cn/hlxy/20201201/136491.html",
          title: "深夜交大，有点暖！是追梦者努力的身影！"
        },
        {
          img: require("@/assets/images/20201201_024520_330.jpg"),
          path: "https://news.sjtu.edu.cn/hlxy/20201201/136499.html",
          title: "从逐梦交大到筑梦未来，有一种成长叫“长大后我就成了你”"
        }
      ],
      list2: [
        {
          img: require("@/assets/images/20201215_070115_673.jpg"),
          path: "https://news.sjtu.edu.cn/hlxy/20201215/137715.html",
          title: "“交通大学的交通，真方便！”"
        },
        {
          img: require("@/assets/images/20201201_023354_287.png"),
          path: "https://news.sjtu.edu.cn/hlxy/20201201/136493.html",
          title: "见证身边的变化！交大精致校园，因你更美丽！"
        },
        {
          img: require("@/assets/images/20201123_062255_328.png"),
          path: "https://news.sjtu.edu.cn/hlxy/20201123/135591.html",
          title: "惊了，这是医学生的笔记！青铜这样记，白银这样记，王者却……"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  padding: 30px 0;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .logo {
    margin-bottom: 60px;
    img {
      width: 70%;
      margin: auto;
      display: block;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        width: 100%;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        width: 100%;
      }
    }
  }
  .el_row {
    .house-box {
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        margin-bottom: 150px;
        &:last-child {
          margin-bottom: 0;
        }
        &:first-child {
          margin-top: 60px;
        }
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        margin-bottom: 150px;

        &:last-child {
          margin-bottom: 0;
        }
        &:first-child {
          margin-top: 60px;
        }
      }
    }
    .house {
      position: relative;
      border-left: 10px solid #dda9a9;
      border-right: 10px solid #dda9a9;
      min-height: 300px;
      border-radius: 30px;
      padding-top: 90px;
      padding-bottom: 15px;
      .top {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-50%);
      }
      .banner {
        perspective: 500px;
        .content {
          transform-style: preserve-3d;
          a {
            display: block;
            transition: 0.3s;
            position: relative;
            &:hover {
              transform: translateZ(30px);
              box-shadow: 0 5px 5px #999;
              background-color: #ffffff;
            }
            .banne {
              height: 120px;
              object-fit: cover;
            }
            img {
              width: 100%;
              display: block;
            }
            .title {
              font-size: 11px;
              color: #ffffff;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              padding: 5px 10px;
              line-height: 14px;
              text-shadow: 0 0 5px #333;
            }
          }
          ul {
            display: block;
            li {
              margin-bottom: 15px;
              .list {
                display: flex;
                padding: 5px 5px 5px 5px;
                border-bottom: 1px solid #999;
                width: 95%;
                margin: 0 auto;
                .list-img {
                  width: 30%;
                  height: 50px;
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }
                .list-title {
                  flex-grow: 1;
                  padding: 5px;
                  font-size: 10px;
                  line-height: 14px;
                }
              }
            }
          }
        }
      }
    }
    .mid.house {
      transform: scale(0.8);
    }
  }
}
</style>
